<template>
  <div class="box">
    <!-- 顶部 名称 -->
    <van-sticky>
      <div class="header">
        <span class="title">购物车</span>
        <span class="psna">编辑</span>
        <span class="coupons">领券</span>
      </div>
    </van-sticky>

    <!-- 黄色自营区 -->
    <div v-show="true">
      <div class="autarky">自营仓商品，已满99元免邮</div>
      <div class="hd">
        <span class="cart">全球购</span>
        <span class="promTip">已满足1件享4折起限时换购</span>
        <span class="promBtn">再逛逛></span>
        <p class="promGuide">去换购商品></p>
      </div>
    </div>

    <!-- 购物车列表 -->
    <div v-for="cartInfo in cartInfoList" :key="cartInfo.id" class="cart-item">
      <!-- 向右滑动的盒子包裹 -->
      <van-swipe-cell>
        <div class="swip-box">
          <!-- 每个商品前的按钮 -->
          <!-- cartInfoCopy是为了解决checkbox组件只能返回布尔值，但是我们服务器传回来的数据只是1或0 -->
          <van-checkbox
            v-model="cartInfo.isChecked"
            checked-color="#ee0a24"
            class="checkbox-btn"
          ></van-checkbox>
          <!-- 商品信息 -->
          <!-- :thumb="item.list_pic_url" 跳转后面用路由去做 -->
          <van-card
            :price="cartInfo.cartPrice"
            :thumb="cartInfo.imgUrl"
            :title="cartInfo.skuName"
            @click-thumb="GoodDetailInfo(cartInfo.skuId)"
          >
            <template #num>
              <van-stepper
                v-model="cartInfo.skuNum"
                @plus="handleChangeGoodNum(cartInfo, 1)"
                @minus="handleChangeGoodNum(cartInfo, -1)"
                @blur="skuNumChange(cartInfo, $event)"
                min="1"
                max="200"
                integer
              />
            </template>
          </van-card>
        </div>
        <template #right>
          <van-button
            @click="handleDeleteOne(cartInfo.skuId)"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 空盒子，用于滑动正常显示 -->
    <div class="empty"></div>
    <van-submit-bar
      :price="totalPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox
        @click="handleCheckAll"
        v-model='isAll'
        checked-color="#ee0a24"
        >全选</van-checkbox
      >
      <template #tip> 你的收货地址不支持同城送,仅快递配送! </template>
    </van-submit-bar>
    <van-dialog v-model="show" title="标题" show-cancel-button >
       
    </van-dialog>
  </div>
</template>

<script>
import {
  reqCheckOneCart,
  reqCartList,
  reqCheckAllCart,
  reqDeleteOneCart,
  reqAddGood2Cart,
  reqPayInfo
} from "@/api";
export default {
  name: "",
  data() {
    return {
      cartInfoList: [],
      checked: false,
      show: false,

    };
  },
  computed: {
    // 用户标识是否全选
    isAll: {
      get() {
        // 所有商品的isChecked都为1的时，isAll为true，否则false
        return this.cartInfoList.every((cartInfo) => cartInfo.isChecked === 1);
      },
      // 因为计算属性默认是只读属性，所以要改成这种形式，就不会报错了
      set() {},
    },
    totalPrice() {
      let n = 0; //初识化一个值，用于累加总金额
      this.cartInfoList.forEach((cartInfo) => {
        if (cartInfo.isChecked) {
          n += cartInfo.skuNum * cartInfo.cartPrice;
        }
      });
      return n;
    },
  },
  methods: {
    //用于获取购物车数据的函数
    async getCartList() {
      // 发请求获取购物车数据
      let result = await reqCartList();
      if (result.code === 200) {
        // 如果购物车中有数据，在存储
        if (result.data[0]) {
          this.cartInfoList = result.data[0].cartInfoList;
        }
      } else {
        // 若服务器端，勾选失败，则提示失败原因
        this.$notify({ type: "danger", message: result.message });
      }
    },
    // 勾选一个商品的回调
    async handleCheckOne(cartInfo) {
      // 获取商品的：id，当前的勾选状态
      let { skuId, isChecked } = cartInfo;
      // 对勾选状态进行取反
      isChecked = (isChecked == 1 ? 0 : 1)
      //联系服务器去勾选商品
      let result = await reqCheckOneCart(skuId, isChecked);
      if (result.code === 200) {
        // 若服务器端，勾选成功，则更新本地数据
        cartInfo.isChecked = isChecked;
      } else {
        // 若服务器端，勾选失败，则提示失败原因
        this.$notify({ type: "danger", message: result.message });
      }
    },
    // 全选的回调
    async handleCheckAll() {
      // 获取购物车中所有商品、当前的全选状态
      let { cartInfoList, isAll } = this;
      // 全选状态取反
      let isChecked = (isAll ? 0 : 1);
      // 准备一个空数组，用于存储每一个id
      let idList = [];
      // 将购物车中所有的商品id拿出来，形成一个数组
      cartInfoList.forEach((cartInfo) => idList.push(cartInfo.skuId));
      // 发请求进行全选
      let result = await reqCheckAllCart(idList, isChecked);
      // 判断全选是否成功
      if (result.code === 200) {
        // 若成功，更新本地数据
        cartInfoList.forEach((cartInfo) => (cartInfo.isChecked = isChecked));
      } else {
        // 若服务器端，勾选失败，则提示失败原因
        this.$notify({ type: "danger", message: result.message });
      }
    },
    // 删除某个商品的回调
    async handleDeleteOne(id) {
      // 发请求去删除
      const result = await reqDeleteOneCart(id);
      // 判断删除是否成功？
      if (result.code === 200) {
        let index = this.cartInfoList.findIndex(
          (cartInfo) => cartInfo.skuId === id
        );
        this.cartInfoList.splice(index, 1);
      } else {
        // 若服务器端，勾选失败，则提示失败原因
        this.$notify({ type: "danger", message: result.message });
      }
    },
    // 删除选中的商品回调  未做！！！！
    async handleBatchDelete() {
      if (confirm("确定删除已选择的吗？")) {
        // 准备好一个数组，用于收集商品skuId
        const idList = [];
        // 遍历收集商品skuId
        this.cartInfoList.forEach((cartInfo) => {
          if (cartInfo.isChecked) {
            idList.push(cartInfo.id);
          }
        });
        // 联系服务器
        let result = await reqBatchDeleteCart(idList);
        // 判断业务逻辑是成功
        if (result.code === 200) {
          // 若服务器端删除成功，则维护本地数据
          // 留下所有isChecked为0的，简言之：没勾的都留下，勾了的都不要
          this.cartInfoList = this.cartInfoList.filter(
            (cartInfo) => !cartInfo.isChecked
          );
        } else {
          // 若服务器端删除失败，则提示原因
          alert(result.message);
        }
      }
    },
    // 修改商品数量的回调           !!!!!!!!!!!!!! 有问题 为解决
    async handleChangeGoodNum(cartInfo, value) {
      const { skuId } = cartInfo;
      let result = await reqAddGood2Cart(skuId, value);
      if (result.code === 200) {
        // vant组件自动帮我们维护了本地数据
        cartInfo.isChecked = 1;
      } else {
        // 若服务器端，勾选失败，则提示失败原因
        this.$notify({ type: "danger", message: result.message });
      }
    },
    async skuNumChange(cartInfo, e) {
      const { skuId } = cartInfo;
      const { value } = e.target;
      let result = await reqAddGood2Cart(skuId, value);
      if (result.code === 200) {
        // vant组件自动帮我们维护了本地数据
        cartInfo.isChecked = 1;
      } else {
        // 若服务器端，勾选失败，则提示失败原因
        this.$notify({ type: "danger", message: result.message });
      }
    },
    // 点击提交订单按钮
    async onSubmit() {
      this.show=true
    },
    GoodDetailInfo(id){
         this.$router.push({path:'/detail',query:{id}})
    },
    
  },
  mounted() {
    this.getCartList();
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-submit-bar {
  bottom: 50px;
}
/deep/ .van-swipe-cell{
  height: 100%;
}
body{
  padding-right: 0px;
}
.box {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  .header {
    width: 375px;
    height: 44px;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    .title {
      line-height: 44px;
      font-size: 18px;
      padding: 0 15px;
    }
    .psna {
      float: right;
      font-size: 15px;
      line-height: 44px;
      padding-right: 15px;
    }
    .coupons {
      float: right;
      line-height: 44px;
      padding-right: 25px;
      color: #fc865f;
      font-size: 12px;
    }
  }
  .autarky {
    width: 100%;
    height: 40px;
    color: #f48f18;
    line-height: 40px;
    box-sizing: border-box;
    padding: 0 15px;
    font-size: 15px;
    background-color: #fff8d8;
  }
  .hd {
    width: 100%;
    height: 73px;
    background-color: #fff;
    .cart {
      width: 56px;
      height: 16px;
      font-size: 12px;
      margin-left: 15px;
      color: #fff;
      background: #fc865f;
    }
    .promTip {
      width: 219px;
      height: 20px;
      margin-left: 10px;
      font-size: 12px;
    }
    .promBtn {
      width: 45px;
      height: 18px;
      line-height: 35px;
      font-size: 12px;
      padding-right: 15px;
      float: right;
      color: #dd1a21;
    }
    .promGuide {
      font-size: 12px;
      width: 317px;
      height: 28px;
      line-height: 28px;
      margin: 10px 15px 5px 43px;
      background: rgba(252, 134, 95, 0.05);
    }
  }
  .cart-item {
    margin-top: 10px;
    height: 100%;
    .swip-box {
      position: relative;
      padding-left: 40px;
      background-color: #fafafa;
      .checkbox-btn {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .delete-button{
      width: 100%;
      height: 100%;
    }
  }
  .empty{
    height: 150px;
  }
}
</style>